<!DOCTYPE html>
<html lang="en" xmlns:th="https://www.thymeleaf.org">
<div th:replace="common/common::html"></div>
<head>
    <meta charset="UTF-8">
    <title th:text="#{login.title}"></title>
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Expires" content="0">
    <script th:inline="javascript">
        function checkCaptchaAndSubmit() {
            // 1. 校验表单基础内容（保留原有 checkDom 逻辑）
            var flag = $(".form-control").checkDom();
            if (!flag) {
                return;
            }

            // 2. 判断是否需要验证码校验（根据后端 session.needVerify）
            var needVerify = [[${session.needVerify}]];
            if (needVerify) {

                var userInputCode = $("#verify-code-id").val();

                $.ajax({
                    type: 'post',
                    async: false,
                    dataType : 'json',
                    url: /*[[@{/login/verifyCode}]]*/'',
                    data: [{name:"userInputCode",value:userInputCode}],
                    success: function (data) {
                        // console.info('deleteUserByIds:' +JSON.stringify(data))
                        message(data.msg)
                        if(data.success){
                            $("#login-form-id").submit();
                        }else{
                            message(data.msg)
                        }

                    },
                    error: function(msg){
                        message(/*[[#{common.error}]]*/'');
                    }
                });
            }else{
                $("#login-form-id").submit();
            }
            //     // 4. 调用 getAuth 校验验证码（核心逻辑）
            //     fetch('/login/getAuth?userInputCode=' + verifyCode)
            //         .then(response => response.json())
            // .then(data => {
            //         if (data.status === 'error') {
            //         alert("验证码错误：" + data.message);
            //         // 刷新验证码
            //         $("#verify-img").trigger("click");
            //         return;
            //     }

                // 5. 校验通过，提交登录表单
                // $("#login-form-id").submit();
            // })
            // .catch(error => {
            //         alert("验证码校验失败，请重试");
            // });
            // } else {
                // 不需要验证码，直接提交表单
                // $("#login-form-id").submit();
            // }
        }

        $(function () {
            // 登录按钮绑定校验函数
            $("#login-sumbit-id").click(function () {
                checkCaptchaAndSubmit();
            });

            // 验证码图片点击换图
            $("#verify-img").click(function () {
                var url = /*[[@{/login/getVerifyImag}]]*/ '';
                $(this).attr("src", url + "?rand=" + Math.random());
            });
        })
    </script>
    <style>
        body {
            display: flex;
            flex-direction: column;
        }

        body > header {
            display: flex;
            width: 100%;
            justify-content: space-between;
            padding: 10px;
            align-items: center;
            height: 100px;
        }

        body > header > img {
            height: 80px;
        }

        body > header > nav {
            width: 150px;
            display: flex;
            justify-content: space-between;
            padding-right: 20px;
        }

        body > article {
            flex-grow: 1;
            background-color: #d4efec;
            width: 100%;
            display: flex;
            align-items: center;
        }

        body > article > section {
            flex-grow: 1;
            display: flex;
        }

        body > article > form {
            flex-basis: 300px;
            margin-right: 30px;
        }

        #login-sumbit-id {
            width: 100%;
        }

        #register-btn {
            width: 100%;
            margin-top: 10px;
            padding: 8px;
            background-color: #5cb85c;
            color: white;
            border: none;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            cursor: pointer;
        }

        .verify-group {
            display: inline;
            align-items: start;
            margin-top: 10px;
        }

        #verify-img {
            cursor: pointer;
            margin-left: 10px;
            width: 100px;
            height: 30px;
            text-align: center;
        }

        .alert {
            padding: 15px;
            margin-bottom: 20px;
            border: 1px solid transparent;
            border-radius: 4px;
        }

        .alert-danger {
            color: #a94442;
            background-color: #f2dede;
            border-color: #ebccd1;
        }

        .captcha-group {
            margin-top: 10px;
            display: flex;
            align-items: center;
        }
    </style>
</head>
<body>
<header>
    <img th:if="${session.lang} eq 'en'" th:src="@{/assets/images/logo_en.png}">
    <img th:unless="${session.lang} eq 'en'" th:src="@{/assets/images/logo_zh.png}">

    <nav>
        <a th:href="@{/login/login(lang=en)}" th:text="#{login.english}"></a>
        <a th:href="@{/login/login(lang=zh)}" th:text="#{login.chinese}"></a>
    </nav>
</header>
<article>
    <section>
        <img th:src="@{/assets/images/pic.png}">
    </section>

    <form id="login-form-id" method="post" action="verification">
<!--        <div th:if="${message}" class="alert alert-success" th:text="${message}"></div>-->
        <div class="form-group">
            <span th:text="#{login.user.name}"></span>
            <input class="form-control" name="username"
                   th:placeholder="#{login.user.name.plch}"
                   th:title="#{login.user.name.plch}"
                   pattern="^.{4,}$"
            >
        </div>

        <div class="form-group">
            <span th:text="#{login.user.password}"></span>
            <input class="form-control" name="password" type="password"
                   th:placeholder="#{login.password.plch}"
                   th:title="#{login.password.plch}"
                   pattern="^.{6,}$"
            >
        </div>

        <div class="form-group captcha-group" th:if="${session.needVerify}">
            <span th:text="#{login.verify.code}"></span>
            <input class="form-control" name="verifyCode"
                   id="verify-code-id"
                   th:placeholder="#{login.verify.code.plch}"
                   pattern="^.{4,}$"
                   required
            >
            <img id="verify-img" th:src="@{/login/getVerifyImag}" class="verify-group">
        </div>

        <a id="login-sumbit-id" class="btn btn-success btn-group-lg" href="#" th:text="#{login.submit}"></a>
        <a id="register-btn" class="btn btn-primary btn-group-lg" th:href="@{/login/register}" th:text="#{register.submit}"></a>
        <a id="forgot-password-btn" class="btn btn-link" th:href="@{/passwordReset/page}" th:text="#{login.forgot.password}"></a>
        <div th:if="${errorMsg}" class="alert alert-danger" th:text="${errorMsg}"></div>
    </form>
</article>
</body>
</html>
